<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>
  <body>
    <!-- 登录注册 -->
    <div id="login">
      <input type="text" id="username" placeholder="请输入用户名" />
      <input type="password" id="password" placeholder="请输入密码" />
      <button id="btn">登录</button>
      <button id="huoqu">获取数据</button>
      <div id="list"></div>

      <div id="add">
        <label>name: <input type="text" id="name" /></label>
        <label>age: <input type="text" id="age" /></label>
      </div>
      <button id="addFn">添加</button>

      <input type="text" id="ipt" />
      <button id="search">查询</button>
      <div id="show"></div>
    </div>
    <script>
      // 登录注册逻辑
      // 1.获取元素
      let username = document.getElementById("username");
      let password = document.getElementById("password");
      let btn = document.getElementById("btn");
      // 2.绑定事件
      btn.onclick = function () {
        // 3.获取用户输入的值
        let usernameValue = username.value;
        let passwordValue = password.value;
        // 4.发送请求
        axios
          .post("http://127.0.0.1:3000/login", {
            username: usernameValue,
            password: passwordValue,
          })
          .then(function (res) {
            console.log(res);
            // 储存token
            localStorage.setItem("token", res.data.token);
          })
          .catch(function (err) {
            console.log(err);
          });
      };

      // 获取数据
      let huoqu = document.getElementById("huoqu");
      let list = document.getElementById("list");
      huoqu.onclick = function () {
        // 2.发送请求
        axios
          .get("http://127.0.0.1:3000/getData", {
            headers: {
              Authorization: "Bearer " + localStorage.getItem("token"),
            },
          })
          .then(function (res) {
            // const { data } = res.data;
            // for (let i = 0; i < data.length; i++) {
            //   list.innerHTML += `
            //     <div>${data[i].title}</div>
            //   `;
            // }
            // 用forEach重写
            res.data.data.forEach((item) => {
              list.innerHTML += `
                <div>${item.title}</div>
              `;
            });
          })
          .catch(function (err) {
            console.log(err);
          });
      };

      // 添加数据
      let addFn = document.getElementById("addFn");
      let name = document.getElementById("name");
      let age = document.getElementById("age");
      addFn.onclick = function () {
        // 2.发送请求
        axios
          .post(
            "http://127.0.0.1:3000/addDate",
            {
              name: name.value,
              age: age.value,
            },
            {
              headers: {
                Authorization: "Bearer " + localStorage.getItem("token"),
              },
            }
          )
          .then(function (res) {
            console.log(res);
          })
          .catch(function (err) {
            console.log(err);
          });
      };

      // search
      let search = document.getElementById("search");
      let ipt = document.getElementById("ipt");
      let show = document.getElementById("show");
      search.onclick = function () {
        // 2.发送请求
        axios
          .post(
            "http://127.0.0.1:3000/search",
            {
              name: ipt.value,
            },
            {
              headers: {
                Authorization: "Bearer " + localStorage.getItem("token"),
              },
            }
          )
          .then((res) => {
            console.log(res);
            show.innerHTML = `
            <div>${res.data.data[0].name}</div>
            <div>${res.data.data[0].age}</div>
          `;
          })
          .catch((err) => {
            console.log(err);
          });
      };
    </script>
  </body>
</html>
